<template>
  <div>
    <TopPart :isLogin="false" :isFunc="true" />
    <div v-if="logined">
      <!-- 收藏页顶部 -->
      <div class="col-header">
        <img :src="imgUrl+userInfo.background" class="background" />
        <div class="wrapper">
          <img :src="userInfo.avatar" class="avatar" />
        </div>
        <div class="username">
          <div class="content">{{ userInfo.nickname }}</div>
          <div class="realname">{{ userInfo.username }}</div>
          <van-button class="custom-btn" round type="info" @click="editInfo">编辑信息</van-button>
        </div>
      </div>
      <!-- 收藏页tab -->
      <div class="col-tab">
        <van-tabs v-model="active">
        <van-tab title="收藏">
          <div v-if="collections.length > 0">
            <div class="col-body" v-for="item in collections" :key="item.id">
              <div class="col-title">
                <span class="col-title-content">{{ item.title }}</span>
                <van-tag plain :type="item.public ? 'primary' : 'warning'" style="margin-top: 2px;">{{ item.public | typeText }}</van-tag>
              </div>
              <div class="col-desc">描述：{{ item.description }}</div>
              <div class="col-date">创建日期：{{ item.createdAt | convertTime }}</div>
            </div>
          </div>
          <div v-else class="no-content">
            暂无内容~
          </div>
        </van-tab>
        <van-tab title="热门">
          <div v-if="articles.length > 0" class="list">
            <div class="list-item" v-for="item in articles" :key="item.id" @click="goDetail(item.id)">
              <div class="item-title">
                {{ item.title }}
              </div>
              <div class="item-author">
                <span class="author-name">作者：{{ item.user.username }}</span>
                <img :src="item.user.avatar" />
              </div>
              <!-- <div class="item-func">
                <van-button icon="good-job-o" class="like" type="info" plain>点赞 {{ item.like }}</van-button>
                <van-button icon="star-o" class="like" color="#ff9900" plain>收藏</van-button>
              </div> -->
            </div>
          </div>
          <div v-else class="no-content">
            暂无内容~
          </div>
      </van-tab>
    </van-tabs>
      </div>
    </div>
  </div>  
</template>

<script>
import { mapState } from 'vuex'
import TopPart from 'components/Home/TopPart'
import { getCollectionsByOwner } from '@/api/collection'
import { getArticles } from '@/api/article'
import { serverUrl } from '@/utils/setting'

export default {
  data() {
    return {
      active: 0,
      collections: [],
      articles: [],
      page: 1,
      limit: 15
    }
  },
  filters: {
    convertTime: function(val) {
      return new Date(val).toLocaleDateString()
    },
    typeText: function(val) {
      if(!val) {
        return '私有'
      } else {
        return '公开'
      }
    }
  },
  computed: {
    imgUrl() {
      return serverUrl
    },
    ...mapState([ 'logined', 'userInfo' ])
  },
  watch: {
    active: {
      handler(val) {
        this.getData(val)
      },
      immediate: true
    }
  },
  methods: {
    getData(val) {
      if(val === 0) {
        let data = {
          author: this.userInfo.id
        }
        getCollectionsByOwner(data).then(res => {
          if(res.data.code === '0') {
            this.$toast.success(res.data.desc)
            this.collections = res.data.collections
          } else {
            this.$toast.fail(res.data.desc)
          }
        }).catch(err => {
          this.$toast.fail(err)
        })
      } else {
        getArticles({page: this.page, limit: this.limit}).then(res => {
          if(res.data.code === '0') {
            this.$toast.success(res.data.desc)
            this.articles = res.data.articles.rows
          } else {
            this.$toast.fail(res.data.desc)
          }
        }).catch(err => {
          this.$toast.fail(err)
        })
      }
    },
    goDetail(id) {
      this.$router.push('/articles/'+id)
    },
    editInfo() {
      this.$router.push('/user/edit')
    }
  },
  components: {
    TopPart
  }
}
</script>

<style lang="stylus" scoped>
.col-header
  border-radius 4px
  background #fff
  .background
    margin-top 46px
    border-bottom 1px solid #f1f1f1
    width 100%
  .wrapper
    margin-top -38px
    display flex
    justify-content center
    align-items center
    .avatar
      width 70px
      height 70px
      border-radius 50%
      box-shadow 0 1px 5px 0 #aaa
  .username
    text-align center
    .content
      margin 15px 0
      font-weight 400
      font-size 18px
      color #333
    .realname
      margin-bottom 15px
      font-weight 400
      font-size 16px
      color #aaa
    .custom-btn
      margin-bottom 15px
      background-image linear-gradient(45deg, #0081ff, #1cbbb4);
      border-radius 10px
      padding 0 25px
      border none
.col-tab
  margin 15px 0 80px 0
  border-radius 4px
  background #fff
.col-body
  border-radius 4px
  border 1px solid #f5f5f5
  box-shadow 0 1px 3px rgba(18,18,18,.1)
  margin 15px 10px
  .col-title
    display flex 
    justify-content center
    align-items center
    padding 15px 0
    .col-title-content
      margin-right 5px
  .col-desc
    color #aaa
    padding 0 15px 15px 15px
    height 36px
    overflow-y auto
  .col-date
    color #aaa
    padding 0 15px 15px 15px
.list
  .list-item
    border-radius 4px
    box-shadow 0 1px 3px rgba(18,18,18,.1)
    padding 15px
    margin 15px 10px
    .item-title
      font-size 18px
    .item-author
      margin 10px 0
      display flex
      align-items center
      justify-content flex-start
      .author-name
        color #a1a1a1
      img
        width 25px
        height 25px
        border-radius 50%
        margin-left 8px
    .item-content
      max-height 120px
      margin-bottom 10px
    .item-func
      display flex
      justify-content flex-start
      align-items center
      .like
        font-size 16px
        margin-right 8px
.no-content
  display flex 
  justify-content center 
  align-items center 
  padding 20px 0
  color #646566
</style>